<template>
  <div>
    <el-dialog
      title="数据表详情信息"
      width="850px"
      :visible.sync="is_visible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form size="small" label-width="60px" style="margin-right: 30px">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="表名:"
              :error="String(errors.name ? errors.name : '')"
            >
              <el-input v-model="form_data.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="别名:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.alias" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
                <el-row>
          <el-col :span="12">
            <el-form-item
              label="创建人:"
              :error="String(errors.name ? errors.name : '')"
            >
              <el-input v-model="form_data.creator_username" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="日期:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.creation_time" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="描述:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.readme" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs  tab-position="left" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(tab_v, tab_k) in tab_pane" :key="tab_v" :label="tab_k" :name="tab_v.toString()">
            <el-table
              :data="field_data.fields"
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="描述">
                      <span>{{ props.row.readme }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="字段名称"
                prop="name">
              </el-table-column>
              <el-table-column
                label="别名"
                prop="alias">
              </el-table-column>
              <el-table-column
                label="必须"
                prop="required">
              </el-table-column>
              <el-table-column
                label="多值"
                prop="is_multi">
              </el-table-column>
              <el-table-column
                label="类型"
                prop="type">
                <template slot-scope="scope">
                    {{Type_Map[scope.row.type]}}
                </template>
              </el-table-column>
            </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { addField, delField, listField } from "@/api/vadmin/cmdb/table";

export default {
  name: "Field_Detail",
  components: {},
  data() {
    return {
      is_visible: false,
      loading: false,
      form_data: {},
      field_data: {fields:[]},
      data: {},
      errors: {},
      activeName: 0,
      Type_Map:{},
      table: "",
      tab_pane: {
        基本属性: 0,
        私有属性: 1,
      },
    };
  },
  created() {
    this.Type_Map=this.$store.state.cmdb.Type_Mapping
  },
  methods: {
    handleClose() {
      this.is_visible = false;
      this.data = false;
      this.$emit("listenChileEvent", 1);
    },
    handleClick() {
      this.field_data= {fields:[]}
      console.log(this.activeName)
      listField({attr:this.activeName,table_id:this.table}).then((response)=>{
        this.field_data={fields:response.data.results}
      })
    },
    on_show(data, table) {
      console.log("cccccccc",this.activeName)
      this.table = table.id;
      this.is_visible = data;
      this.data = this.is_visible;
      this.form_data = JSON.parse(JSON.stringify(table));
      listField({attr:this.activeName,table_id:this.table}).then((response)=>{
        console.log(response)
        this.field_data={fields:response.results}
      })
    },
    on_field_submit(item, index) {
      // api创建字段
      console.log(item)
      item.table = this.form_data.name;
      addField(item).then((response) => {
          this.loading = false;
          this.msgSuccess("添加字段成功");
          item.is_submited = true;
          item.id = response.data.id;
          this.errors = {};
        })
        .catch(error => {
          this.loading = false;
          this.errors = error.response.data;
        }); 
      // this.loading = true;
    },
    on_field_cancel(item, index) {
      this.field_data.fields.splice(index, 1);
    },
    on_field_delete(item, index) {
      delField(item.id).then((response)=>{
        this.loading = false;
        this.msgSuccess("删除成功");
        listField({attr:0,table_id:this.table}).then((response)=>{
        this.field_data={fields:response.data.results}
      })
      })
    },

    on_add_field(fieldType) {
      console.log(fieldType)
      var fields = this.field_data.fields;
      fields.splice(fields.length, 0, {
        name: "",
        alias: "",
        readme: "",
        attr:fieldType,
        type: 0,
        is_multi: false,
        required: false,
        is_submited: false,
      });
    },
  },
};
</script>

<style scoped>
</style>
